.order {
  width: 32px;
  height: 32px;
  background-color: #f0f2f5;
  border-radius: 4px;
  color: #666;
  font-weight: bold;
  margin: 12px;
  flex-shrink: 0;
}

.order.order-1 {
  /* 新增3D效果 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2),
    /* 右下阴影 */ inset -3px -3px 5px rgba(0, 0, 0, 0.2),
    /* 内凹阴影 */ inset 3px 3px 5px rgba(255, 255, 255, 0.3); /* 高光 */

  /* 渐变光泽 */
  background: linear-gradient(
    135deg,
    #ff9f1e 0%,
    #ffb550 30%,
    #ff9f1e 70%,
    #e68a00 100%
  );
  /* background-color: #ff9f1e; */
  color: white;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

.order.order-2 {
  color: white;
  background: linear-gradient(135deg, #c4c2d0 0%, #a6a4b8 50%, #8a88a0 100%);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2),
    inset -3px -3px 5px rgba(0, 0, 0, 0.1),
    inset 3px 3px 5px rgba(255, 255, 255, 0.2);
  /* background-color: #c4c2d0; */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

.order.order-3 {
  color: white;
  /* background-color: #eaa490; */
  background: linear-gradient(135deg, #eaa490 0%, #e78b6b 50%, #d97352 100%);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2),
    inset -3px -3px 5px rgba(0, 0, 0, 0.1),
    inset 3px 3px 5px rgba(255, 255, 255, 0.2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

.label {
  margin: 0px !important;
  padding: 2px 8px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.label.新 {
  background-color: #d63aca;
}

.title-link:visited .title {
  color: #8c8c8c !important;
}

.title-link:hover .title {
  color: #1890ff !important;
}
